<template>
  <div>
    <div v-if="isShow">
    <div class="flexBetween">
      <div class="flex">
        <el-input placeholder="请输入截面名称" v-model.trim="name" size="small" clearable></el-input>
        <el-button type="primary" size="small" class="paddingLeft" @click="queryCrossSection(1)">查询</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="add">新增截面</el-button>
      </div>
    </div>
    <div style="max-height: 400px;">
      <el-table
        :data="tableData"
        :header-cell-style="{
            background: '#8595B9',
            color: '#fff',
            height: '44px',
          }"
        class="tableTop"
         max-height="600"
      >
        <el-table-column label="截面名称" prop="sectionName" show-overflow-tooltip></el-table-column>
        <el-table-column label="截面编号" prop="code" show-overflow-tooltip></el-table-column>
        <el-table-column label="X坐标" prop="lng" show-overflow-tooltip></el-table-column>
        <el-table-column label="Y坐标" prop="lat" show-overflow-tooltip></el-table-column>
        <el-table-column label="截面图片" prop="src" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px;margin-top:10px;"
              :src="download + scope.row.picturePath"
              :preview-src-list="[download + scope.row.picturePath]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-tooltip content="关联测点">
              <el-button type="text" icon="el-icon-bangzhu" @click="site(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="修改">
              <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除">
              <el-button
                type="text"
                icon="el-icon-delete"
                style="color:red !important"
                @click="deleteSection(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :page-count="pageNum"
        @current-change="changeCurrent"
      ></el-pagination>
    </div>
    </div>
    <add v-else @go="go" :crossSectionId="id" :ownId="ownId" :sectionId="sectionId" :value="value"></add>
    <vx-popup
      :title="title"
      width="500px"
      @close="pontinecancel"
      :active.sync="addVisible"
      @confirmPopup="pontineAdd"
      @cancelPopup="pontinecancel"
    >
      <el-form
        :model="addForm"
        :rules="addRules"
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="截面名称:" prop="sectionName">
          <el-input v-model.trim="addForm.sectionName" size="small" clearable placeholder="请输入截面名称"></el-input>
        </el-form-item>
        <el-form-item label="截面编号:" prop="code">
          <el-input v-model.trim="addForm.code" size="small" clearable placeholder="请输入截面编号"></el-input>
        </el-form-item>
        <el-form-item label="截面状态:">
          <el-radio-group v-model="addForm.status" size="small">
            <el-radio label="0">停用</el-radio>
            <el-radio label="1">启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="桥梁简介:">
          <el-input
            type="textarea"
            v-model="addForm.remark"
            maxlength="500"
            show-word-limit
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="桥梁图片:">
          <el-upload
            :action="upload"
            list-type="picture-card"
            :on-remove="removeRender"
            :on-success="handleSuccessRender"
            :file-list="imgList"
            :limit="1"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </vx-popup>
  </div>
</template>

<script>
import base from "../../../api/base"
import add from "./add"
export default {
  name: "sectionManagement",
  props: {
    ownId: {
      type: String
    },
    sectionId: {
      type: String
    }
  },
  components: {
    add
  },
  data() {
    return {
      upload: base.UPLOADURL,
      download: base.DOWNLOADURL,
      imgList: [],
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      name: "",
      addVisible: false,
      title: "新增截面",
      addForm: {
        sectionName: "",
        status: "0",
        code: "",
        lng: "",
        lat: "",
        picturePath: "",
        remark: ""
      },
      addRules: {
        sectionName: [
          { required: true, message: "请输入截面名称", trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入截面编号", trigger: "blur" }]
      },
      isShow: true,
      id:'',
      value: {},
    };
  },
  created() {
    this.queryCrossSection(1);
  },
  methods: {
    go(val) {
      console.log(val)
      this.isShow = val
      this.queryCrossSection(1);
    },
    queryCrossSection(val) {
      if (val) {
        this.pageNum = 1;
      }
      let data = {
        ownId: this.ownId,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        sectionId: this.sectionId,
        sectionName: this.name
      };
      this.$api.bridge.queryCrossSection(data).then(res => {
        if (res.data.success) {
          this.tableData = res.data.data.currentPageData;
          this.total = res.data.data.total_sum;
          console.log(res.data);
          console.log(this.tableData);
        }
      });
    },
    changeCurrent(val) {
      this.pageNum = val
      this.queryCrossSection()
    },
    handleSuccessRender(res, file) {
      this.addForm.picturePath = res.data.successFiles[0].filePath;
    },
    removeRender() {
      this.addForm.picturePath = "";
    },
    add() {
      this.title = "新增截面";
      this.addVisible = true;
    },
    reset() {
      this.addForm = {
        sectionName: "",
        status: "0",
        code: "",
        lng: "",
        lat: "",
        picturePath: "",
        remark: ""
      };
    },
    site(val) {
      this.isShow = false
      this.id = val.id
      this.value = val
    },
    //编辑
    handelEdit(val) {
      this.title = "修改截面";
      let imageUrl = this.download + val.picturePath
      let obj = {
          name:'111.png',
          url: imageUrl
      }
      this.imgList = [obj]
      this.addForm = JSON.parse(JSON.stringify(val))
      this.addVisible = true;
    },
    //删除
    deleteSection(val) {
      this.$confirm("此操作将删除截面, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.bridge
            .deleteBridgeCrossSectionById({ id: val.id })
            .then(res => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "删除成功",
                  color: "success"
                });
                this.queryCrossSection();
              }
            });
        })
        .catch(() => {});
    },
    pontinecancel() {
      this.addVisible = false;
    },
    pontineAdd() {
      this.$refs["addForm"].validate(valid => {
        if (valid) {
          if (this.addForm.picturePath !== "") {
            if (this.title === "新增截面") {
              this.$api.bridge
                .addBridgeCrossSection({
                  ...this.addForm,
                  ownId: this.ownId,
                  sectionId: this.sectionId
                })
                .then(res => {
                  if (res.data.success) {
                    this.$vs.notify({
                      text: "新增截面成功",
                      color: "success"
                    });
                    this.addVisible = false;
                    this.reset();
                    this.queryCrossSection();
                  }
                });
            } else {
              let data = {
              id: this.addForm.id,
              sectionName: this.addForm.sectionName,
              status: this.addForm.status,
              code: this.addForm.code,
              picturePath: this.addForm.picturePath,
              remark: this.addForm.remark,
              ownId: this.ownId,
              sectionId: this.sectionId
            };
            console.log(data)
            this.$api.bridge.updateBridgeCrossSection(data).then(res => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "修改截面成功",
                  color: "success"
                });
                this.addVisible = false;
                this.reset();
                this.queryCrossSection();
              }
            });
            }
            
          } else {
          this.$vs.notify({
            text: "请上传截面图片",
            color: "danger"
          });
        }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 44px;
}
/deep/.el-upload--picture-card {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
}
/deep/.el-upload-list--picture-card .el-upload-list__item {
  width: 60px;
  height: 60px;
}
.box-card {
  height: 80vh;
  // position: relative;
  .flexBetween {
    display: flex;
    justify-content: space-between;
    .paddingLeft {
      margin-left: 20px;
    }
  }
  .tableTop {
    margin-top: 20px;
  }
  .page {
    position: absolute;
    left:55%;
    bottom:40px;
  }
}
</style>
